<template>
 <div>
      <Content :list='list'/>
      <Header :tabs='tabs' @selected-item="handlerSelected"/>
  </div>
</template>

<script setup>
import {ref,watchEffect} from 'vue'
import {nanoid} from 'nanoid'
import {getTopcisByParams} from './axios'
import Header from './Content.vue'
import Content from './Content.vue'

const tabs =ref([
{
  id:nanoid(6),
  label:'购物车',
  isActive:true,
  page:1,
},{
  id:nanoid(6),
  label:'收藏',
  isActive:false,
  page:2
},{
  id:nanoid(6),
  label:'首页',
  isActive:false,
  page:3,
},{
  id:nanoid(6),
  label:'设置',
  isActive:false,
  page:4
},{
  id:nanoid(6),
  label:'我的',
  isActive:false,
  page:5
},
  

])
const list = ref(null)

const handlerSelected = id=>{
  tabs.value.forEach(item=>{
      if(item.id==id)item.isActive=true
      else item.isActive=false
  })
}


watchEffect(()=>{
  const activeItem = tabs.value.find(item=>item.isActive)
  getTopcisByParams({limit:5,page:activeItem.page})
  .then(res=>list.value=res.data.data)
})


</script>

<style lang="scss" scoped>

</style>